<template>
  <div>
    <div class="form-container">
      <el-form
        :inline="true"
        label-suffix="："
        :label-width="'100px'"
        :size="'small'"
        ref="form"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="业务编号">
              <el-input
                v-model="query.doccode"
                clearable
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结算对象名称" label-width="100px">
              <el-select
                v-model="query.ent_id"
                placeholder="请选择结算对象"
                style="width: 100%"
                clearable
                filterable
                remote
                :remote-method="getBusDetail"
                :loading="settlementLoading"
              >
                <el-option
                  v-for="item in settlementList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                  <span style="float: left">{{ item.label }}</span>
                  <span style="float: right">{{ item.entFullname }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="提单号">
              <el-input
                v-model="query.bl_no"
                clearable
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开航日期">
              <el-date-picker
                v-model="query.atd"
                type="daterange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 100%"
                size="small"
                value-format="YYYY-MM-DD HH:mm:ss"
                :default-time="[
                  new Date(2000, 1, 1, 0, 0, 0),
                  new Date(2000, 1, 1, 23, 59, 59)
                ]"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户单号">
              <el-input
                v-model="query.cust_doc_no"
                size="small"
                clearable
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="对账单号">
              <el-input
                v-model="query.balance_doccode"
                clearable
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务员">
              <el-select
                v-model="query.sales_id"
                placeholder="请选择业务员"
                style="width: 100%"
                clearable
                filterable
                remote
                :remote-method="getSalesman"
                :loading="salesmanLoading"
              >
                <el-option
                  v-for="item in salesman"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="币种">
              <el-select
                v-model="query.currency"
                placeholder="请选择币种"
                style="width: 100%"
                remote
                :remote-method="getCurrentData"
                :loading="currentLoading"
                clearable
                filterable
              >
                <el-option
                  v-for="item in current"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                  <span style="float: left"> {{ item.label }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="flex-container">
          <el-button type="primary" icon="search" @click="getList" size="small">
            搜索
          </el-button>
          <el-button type="info" icon="refresh" @click="reset" size="small">
            重置
          </el-button>
        </div>
      </el-form>
    </div>
    <div style="margin-top: 8px">
      <div style="display: flex; margin-bottom: 8px">
        <!-- v-if="DocType == 1" -->
        <div class="btn-box">
          <el-button
            type="primary"
            icon="DeleteFilled"
            @click="deleteStatement"
          >
            删除对账单
          </el-button>
          <el-button type="primary" icon="EditPen" @click="modifyMemo">
            修改账单备注
          </el-button>
          <el-button type="primary" @click="accountAduit(1)"> 确认 </el-button>
          <el-button type="primary" @click="accountAduit(0)"> 取消 </el-button>
          <el-button type="primary" @click="downloadFile">
            导出EXCEL
          </el-button>
        </div>
        <div class="btn-right">
          <div v-if="curSumList.checkResult.length">
            <div class="tip"></div>
            <div class="label">
              {{ DocType == 1 ? '应收' : '应付' }}已确认合计
            </div>
            <div
              class="label"
              v-for="(item, index) in curSumList.checkResult"
              :key="index"
            >
              {{ item.currency }}金额：{{
                item.totalAmount ? item.totalAmount : 0
              }}
            </div>
          </div>
          <div v-if="curSumList.unCheckResult.length">
            <div class="tip"></div>
            <div class="label">
              {{ DocType == 1 ? '应收' : '应付' }}未确认合计
            </div>
            <div
              class="label"
              v-for="(item, index) in curSumList.unCheckResult"
              :key="index"
            >
              {{ item.currency }}金额：{{
                item.totalAmount ? item.totalAmount : 0
              }}
            </div>
          </div>
          <!-- <div v-if="curSumListSelected.length">
            <div class="tip"></div>
            <div class="label">选中</div>
            <div
              class="label"
              v-for="(item, index) in curSumListSelected"
              :key="index"
            >
              {{ item.currency }}金额：{{ item.money ? item.money : 0 }}
            </div>
          </div> -->
        </div>
      </div>
      <!--         @update:option="upDataOption" -->
      <AppPageTable
        stripe
        :data="tableData.data"
        @change="getList"
        :height="400"
        ref="tableRef"
        :option="tableData.option"
        v-loading="tableLoading"
        :singleHighLight="true"
        @cellClick="cellClick"
      >
        <el-table-column
          type="selection"
          width="40"
          align="center"
          fixed="left"
        />
        <el-table-column
          align="center"
          label="账单状态"
          showOverflowTooltip
          width="100"
        >
          <template #default="scope">
            {{ scope.row.docstatus == 1 ? '已确认' : '未确认' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="doccode"
          width="200"
          align="center"
          label="对账单号"
        >
          <template #default="scope">
            <div class="flex-center">
              <el-popover
                placement="top"
                :width="200"
                trigger="hover"
                :content="scope.row.doccode"
              >
                <template #reference>
                  <div style="max-width: calc(100% - 35px)" class="ellipsis">
                    {{ scope.row.doccode }}
                  </div>
                </template>
              </el-popover>
              <el-button
                type="text"
                style="padding: 2px"
                @click="sigleDataDetails(scope.row)"
              >
                明细
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="totalAmount"
          width="100"
          align="center"
          label="金额"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          prop="entFullname"
          width="200"
          align="center"
          label="结算对象名称"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          prop="memo"
          align="center"
          label="备注"
          width="200"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          prop="createBy"
          label="创建人"
          align="center"
          width="200"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column label="创建时间" align="center" showOverflowTooltip>
          <template #default="scope">
            {{
              scope.row.createTime
                ? $utils.formatDateTime(
                    scope.row.createTime,
                    'YYYY-MM-DD HH:mm:ss'
                  )
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column label="制单日期" align="center" showOverflowTooltip>
          <template #default="scope">
            {{
              scope.row.docdate
                ? $utils.formatDateTime(
                    scope.row.docdate,
                    'YYYY-MM-DD HH:mm:ss'
                  )
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column label="更新日期" align="center" showOverflowTooltip>
          <template #default="scope">
            {{
              scope.row.updateTime
                ? $utils.formatDateTime(
                    scope.row.updateTime,
                    'YYYY-MM-DD HH:mm:ss'
                  )
                : ''
            }}
          </template>
        </el-table-column>
      </AppPageTable>

      <div
        :class="currentRow ? 'flex-between' : 'flex-end'"
        style="margin-top: 8px"
      >
        <div class="flex-start">
          <span v-if="currentRow" class="label" style="margin-right: 8px"
            >对账单号：{{ currentRow.doccode }}</span
          >
          <div v-if="curSumListSelected.length">
            <div class="tip"></div>
            <div class="label">汇总</div>
            <div
              class="label"
              v-for="(item, index) in curSumListSelected"
              :key="index"
            >
              {{ item.currency }}金额：{{ item.money ? item.money : 0 }}
            </div>
          </div>
        </div>
        <div class="btn-box" style="flex-grow: 0">
          <el-button
            type="primary"
            @click="addAccountFee"
            icon="Plus"
            :disabled="currentRow?.docstatus == 1"
          >
            添加明细
          </el-button>
          <el-button
            type="primary"
            icon="DeleteFilled"
            @click="deleteAccout"
            :disabled="currentRow?.docstatus == 1"
          >
            删除明细
          </el-button>
        </div>
      </div>
      <AppPageTable
        stripe
        :data="tableData.dataBottom"
        :height="300"
        :isPagination="true"
        :option="tableData.optionBottom"
        v-loading="tableData.optionBottom.loading"
        style="margin-top: 8px"
      >
        <el-table-column
          type="selection"
          width="40"
          align="center"
          fixed="left"
        />
        <el-table-column
          prop="doccode"
          width="200"
          align="center"
          label="业务编号"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          prop="blNo"
          width="200"
          align="center"
          label="M提单号"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column label="收支" align="center" showOverflowTooltip>
          <template #default="scope">
            {{ scope.row.isIncome == '0' ? '付' : '收' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="currency"
          align="center"
          label="币种"
          showOverflowTooltip
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="feeCode"
          align="center"
          label="费用代码"
          width="100"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          prop="feeName"
          label="费用别名"
          align="center"
          width="200"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          prop="price"
          label="单价"
          align="center"
          width="200"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          label="数量"
          align="center"
          width="100"
          showOverflowTooltip
        >
          <template #default="scope">
            {{ scope.row.digit }}
          </template>
        </el-table-column>
        <el-table-column
          label="费用金额"
          align="center"
          width="100"
          showOverflowTooltip
        >
          <template #default="scope">
            {{ scope.row.totalmoney }}
          </template>
        </el-table-column>
        <el-table-column
          label="收付金额"
          align="center"
          width="100"
          showOverflowTooltip
        >
          <template #default="scope">
            {{ scope.row.verificationMoney }}
          </template>
        </el-table-column>
        <el-table-column
          label="结算对象名称"
          align="center"
          width="200"
          showOverflowTooltip
        >
          <template #default="scope">
            {{ scope.row.entFullname }}
          </template>
        </el-table-column>
        <el-table-column
          label="发票号"
          align="center"
          width="200"
          showOverflowTooltip
        >
          <template #default="scope">
            {{ scope.row.invoiceNumber }}
          </template>
        </el-table-column>
        <el-table-column
          label="对账单号"
          align="center"
          width="200"
          showOverflowTooltip
        >
          <template #default="scope">
            {{ scope.row.balanceDoccode }}
          </template>
        </el-table-column>
      </AppPageTable>
      <!-- 修改对账单备注 -->
      <AccountStatement
        ref="accountStatementRef"
        :DocType="DocType"
        :hasAccount="true"
        @getList="getList"
      ></AccountStatement>
      <!-- 批量销账 -->
      <!-- <CurrencySelect :DocType="DocType" ref="currencySelectRef"></CurrencySelect> -->
      <AccountFormModal
        ref="accountFormModalRef"
        :DocType="DocType"
        @getList="getAddfee"
      ></AccountFormModal>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import AppPageTable, { useTableOption } from '@/components/AppPageTable2'
import request from '@/public/request'
import dayjs from 'dayjs'
import { MoreFilled } from '@element-plus/icons'
import AccountStatement from './AccountStatement.vue'
import CurrencySelect from './CurrencySelect.vue'
import AccountFormModal from './AccountFormModal.vue'
import { ElMessageBox } from 'element-plus'
import { fileDownload } from '@/public/publicUtils'
export default defineComponent({
  components: {
    AppPageTable,
    MoreFilled,
    AccountStatement,
    CurrencySelect,
    AccountFormModal
  },
  props: {
    DocType: {
      type: Number,
      default: ''
    }
  },
  data() {
    return {
      // 查询条件
      query: {
        doccode: '', //业务编号
        ent_id: '', //结算对象名称
        // invoice_code: '', //发票号
        bl_no: '', //提单号
        balance_doccode: '', //对账单号
        sales_id: '', //业务员
        // CheckStatus: 1,//审核状态
        currency: '', //币种
        cust_doc_no: '', //客户单号
        // fee_code: '', //费用类型
        // ctn_seal: '', //箱封号
        // invoiceStatus: -2, //开票状态 0 未开票 1 已开票
        // StartEtd: "",//起始开航日,
        // EndEtd: "",//截止开航日
        // StartPackTime: "",//开始装箱日
        // EndPackTime: "",//结束装箱日
        // StartRecTime: "",//起始接单日
        // EndRecTime: "",//结束接单日
        // StartInvoiceTime: "",//起始开票日
        // EndInvoiceTime: "",//结束开票日
        isIncome: this.DocType,
        // feeStatus: -2, //核销状态
        atd: [] //开航日期
        // pack_time: [], //装箱日期
        // rec_date: [], //接单日期
        // invoice_date: [] //开票日期
      },
      //表格数据
      tableData: {
        data: [],
        option: useTableOption(),
        dataBottom: [],
        optionBottom: useTableOption()
      },
      tableLoading: false,
      // 展开
      hidden: false,
      // 结算对象的数据
      settlementList: [],
      settlementLoading: false,
      // 币种
      current: [],
      currentLoading: false,
      // 业务员
      salesman: [],
      salesmanLoading: false,
      // 核销状态
      WriteOffStatus: [
        {
          label: '全部',
          value: -2
        },
        {
          label: '未核销',
          value: 0
        },
        {
          label: '已核销',
          value: 1
        }
      ],
      // 审核状态
      aduitStatus: [
        {
          label: '全部',
          value: -2
        },
        {
          label: '未审核',
          value: 0
        },
        {
          label: '已审核',
          value: 1
        }
      ],
      //费用类型
      feenameList: [],
      feenameLoading: false,
      // 币种数组
      curList: [],
      // curListTop: [],
      curSumList: {
        checkResult: [],
        unCheckResult: []
      },
      curSumListSelected: [],
      curSelectedSumListBottom: [],
      currentRow: ''
    }
  },
  computed: {},
  methods: {
    // 获取币种类型
    async getCurrentData(val) {
      this.currentLoading = true
      let res = await this.$http.get('/api/base/currency/dropdownlist', {
        keywords: val
      })
      this.current = res.map((item) => {
        return {
          label: item.currencyCode + '|' + item.currencyName,
          value: item.currencyCode
        }
      })
      this.currentLoading = false
    },

    // 查询条件整理
    queryCriteriaArrange() {
      let search = {
        PageIndex: this.tableData.option.page,
        PageSize: this.tableData.option.pageSize,
        ...JSON.parse(JSON.stringify(this.query))
      }
      let queryKeysList = Object.keys(this.query)
      for (const iterator of queryKeysList) {
        if (this.query[iterator] instanceof Array) {
          if (this.query[iterator].length === 0) {
            delete search[iterator]
          }
        } else {
          if (this.query[iterator] === -2) {
            search[iterator] = ''
          }
        }
      }
      return search
    },

    // 单元格单击
    cellClick({ row, column }) {
      if (this.currentRow) {
        for (const iterator of this.tableData.data) {
          if (iterator.id == this.currentRow.id) {
            this.$refs.tableRef.$refs.tableRef.setCurrentRow(iterator)
          }
        }
      }
    },

    // 获取列表数据typeDaptch：有值时，通过表格数据更新刷新
    async getList(typeDaptch) {
      let search = this.queryCriteriaArrange()
      this.tableLoading = true
      let res = await this.$http.post('/api/docbalance/BalanceHasList', search)
      this.curSumList = res.totalMoney
      this.tableData.data = res.content
      this.tableData.option.total = res.totalElement
      this.tableLoading = false
      if (typeof typeDaptch != 'string') {
        this.currentRow = ''
        this.curSumListSelected = []
        this.tableData.dataBottom = []
        this.tableData.optionBottom.total = 0
      } else {
        for (const iterator of this.tableData.data) {
          if (iterator.id == this.currentRow.id) {
            this.$refs.tableRef.$refs.tableRef.setCurrentRow(iterator)
          }
        }
      }
    },

    // 添加账单费用后
    getAddfee() {
      this.getList('bottom')
      this.getListBottom(this.currentRow)
    },

    // 重置
    reset() {
      this.query = {
        doccode: '', //业务编号
        ent_id: '', //结算对象名称
        // invoice_code: '', //发票号
        bl_no: '', //提单号
        balance_doccode: '', //对账单号
        sales_id: '', //业务员
        // CheckStatus: 1,//审核状态
        currency: '', //币种
        cust_doc_no: '', //客户单号
        isIncome: this.DocType,
        // feeStatus: -2, //核销状态
        atd: [] //开航日期
      }
      this.getList()
    },

    // 删除账单费用
    async deleteAccout() {
      if (this.tableData.optionBottom.selected.length == 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      let ids = []
      for (const iterator of this.tableData.optionBottom.selected) {
        ids.push(iterator.id)
      }

      ElMessageBox.confirm('确定删除该账单费用', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let res = await this.$http.post(`/api/docbalance/removeFee`, {
            idArray: ids
          })
          if (res.status) {
            this.getList('bottom')
            this.getListBottom(this.currentRow)
            this.$message.success('删除成功')
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(() => {
          // this.$message.info('取消删除')
        })
    },

    // 判断当前选择的数据是否可以删除
    judgeDeleteAble(data) {
      let canDelte = false
      for (const iterator of data) {
        if (iterator.docstatus == 1) {
          canDelte = true
          break
        }
      }
      return canDelte
    },

    // 删除对账单
    async deleteStatement() {
      if (this.tableData.option.selected.length == 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      if (this.judgeDeleteAble(this.tableData.option.selected)) {
        this.$message.warning('当前选中的数据已确认，请先取消确认')
        return
      }
      let ids = []
      for (const iterator of this.tableData.option.selected) {
        ids.push(iterator.id)
      }

      ElMessageBox.confirm('确定删除该对账单吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let res = await this.$http.post(`/api/docbalance/deleteBalanceList`, {
            idArray: ids
          })
          if (res.status) {
            this.getList()
            this.tableData.dataBottom = []
            this.$message.success('成功')
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(() => {
          // this.$message.info('取消操作')
        })
    },

    // 对账单确认和取消
    async accountAduit(val) {
      let selectedList = this.tableData.option.selected
      if (selectedList.length < 1) {
        this.$message.warning('请至少选择一条数据')
        return
      }
      let falg = false
      let ids = []
      for (const iterator of selectedList) {
        ids.push(iterator.id)
        if (
          (val == 1 && iterator.docstatus == 1) ||
          (val == 0 && iterator.docstatus == 0)
        ) {
          falg = true
        }
      }
      if (falg) {
        if (val == 1) {
          this.$message.warning('选中的数据中存在已确认的数据')
          return
        }
        if (val == 0) {
          this.$message.warning('选中的数据中存在未确认的数据')
          return
        }
      }
      let res = await this.$http.post(`/api/docbalance/checkBalanceStatus`, {
        ids: ids,
        checkStatus: val
      })
      if (res.status) {
        this.getList()
        this.tableData.dataBottom = []
        this.$message.success('成功')
      } else {
        this.$message.warning(res.message)
      }
    },

    // 修改对账单备注
    modifyMemo() {
      if (this.tableData.option.selected.length != 1) {
        this.$message.warning('请选择一条数据！')
        return
      }
      if (this.judgeDeleteAble(this.tableData.option.selected)) {
        this.$message.warning('当前选中的数据已确认，请先取消确认')
        return
      }
      let selectedValue = this.tableData.option.selected[0]
      this.$refs.accountStatementRef.openDialog(selectedValue)
    },

    // 导出excel
    async downloadFile() {
      let search = this.queryCriteriaArrange()
      delete search.PageSize
      delete search.PageIndex
      const _this = this
      fileDownload('/api/docbalance/download', search, '已对账')
        .then(() => {})
        .catch((err) => {
          _this.$message.warning('文件导出失败')
        })
    },

    // 底部表格数据
    async getListBottom(row) {
      if (!row) {
        return
      }
      let ids = []
      ids.push(row.id)
      let res = await this.$http.post(
        `/api/docbalance/getFeeListByBalanceIds`,
        {
          idArray: ids
        }
      )
      this.tableData.optionBottom.loading = true
      this.tableData.dataBottom = res
      this.computeCurencySum(res, 'top')
      this.tableData.optionBottom.loading = false
    },

    // 添加账单费用
    async addAccountFee() {
      if (!this.currentRow) {
        this.$message.warning('请先选择一条账单！')
        return
      }
      this.$refs.accountFormModalRef.open(this.currentRow)
    },

    // 头部表格单选框变动
    sigleDataDetails(row) {
      this.currentRow = row
      this.$refs.tableRef.$refs.tableRef.setCurrentRow(row)
      this.getListBottom(row)
    },

    // 计算当前选中的币种合计
    computeCurencySum(select, tableType) {
      if (tableType == 'top') {
        this.curSumListSelected = []
      } else {
        this.curSelectedSumListBottom = []
      }
      let curList = []
      select.forEach((item) => {
        let totalMoney = item.totalmoney
          ? item.totalmoney * (item.isIncome == this.DocType ? 1 : -1)
          : 0
        if (item.currency) {
          if (curList.indexOf(item.currency) == -1) {
            curList.push(item.currency)
            let curObj = {
              currency: item.currency,
              money: totalMoney
            }
            if (tableType == 'top') {
              this.curSumListSelected.push(curObj)
            } else {
              this.curSelectedSumListBottom.push(curObj)
            }
          } else {
            let sumList = []
            if (tableType == 'top') {
              sumList = this.curSumListSelected
            } else {
              sumList = this.curSelectedSumListBottom
            }
            for (const iterator of sumList) {
              if (iterator.currency === item.currency) {
                iterator.money += totalMoney
              }
            }
          }
        }
      })
    },

    // 获取结算对象的数据
    async getBusDetail(val) {
      this.settlementLoading = true
      let res = await this.$http.get('/api/buenterprise/dropdownlist', {
        KeyWords: val
      })
      res.forEach((item) => {
        item.label = item.entCode
        item.value = item.id
      })
      this.settlementList = res
      this.settlementLoading = false
    },

    // 获取业务员
    async getSalesman(val) {
      this.salesmanLoading = true
      let res = await this.$http.get('/api/user/userList', {
        keyword: val
      })
      res.forEach((item) => {
        item.label = item.nickName
        item.value = item.id
      })
      this.salesman = res
      this.salesmanLoading = false
    },

    // 获取费用类型
    async getFeeType(val) {
      this.feenameLoading = true
      let res = await this.$http.get('/api/base/feetype/query', {
        KeyWords: val
      })
      res.content.forEach((item) => {
        item.label = item.feeName
        item.value = item.feeName
      })
      this.feenameList = res.content
      this.feenameLoading = false
    }
  },
  watch: {},

  created() {
    this.getCurrentData()
    this.getList()
  }
})
</script>

<style lang="scss" scoped>
@import '@/styles/financial.scss';
.form-container {
  border: 1px solid #e8e8e8;
  padding: 6px 6px 6px 8px;
  background-color: #ffffff;

  :deep(.el-form-item--small .el-form-item__label) {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.85);
  }

  :deep(.el-input--suffix .el-input__inner) {
    padding-right: 4px;
  }

  :deep(.el-form--inline .el-form-item) {
    display: flex;
    margin-right: 0;
  }

  :deep(.el-form-item--small.el-form-item) {
    margin-bottom: 8px;
  }
}

.btn-box {
  flex-shrink: 0;
}

.btn-right {
  display: flex;
  flex: 1 1 0%;
}

.tip {
  display: inline-block;
  background: #2867c9;
  width: 4px;
  height: 20px;
  vertical-align: middle;
  margin-left: 8px;
}

.label {
  margin: 0 8px;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
}

.flex-container {
  display: flex;
}

.doccode-text {
  color: rgb(24, 144, 255);
  cursor: pointer;
}

.button-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>

<style lang="scss">
// .accountsReconciled-dailog {
//     .el-dialog__header {
//         border-bottom: 1px solid #e8e8e8;
//     }

//     .el-dialog__footer {
//         border-top: 1px solid #e8e8e8;
//     }
// }
</style>
